<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 1100px"
                stripe
        >
            <el-table-column
                    label="id"
                    width="180" v-if="false">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.id}}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="创建时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.create_time}}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="关联司机"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.driver }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="车牌号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.car_num }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="起始位置"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.start_pos }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="目标位置"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.end_pos }}</span>
                </template>
            </el-table-column>


            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="car-modal" v-if="carForm">
            <el-form :model="carList" label-width="100px" class="update-form">
                <el-form-item label="id" style="display: none">
                    <el-input v-model="carList.id"></el-input>
                </el-form-item>

                <el-form-item label="关联司机">
                    <el-input v-model="carList.driver"></el-input>
                </el-form-item>

                <el-form-item label="车辆牌照号">
                    <el-input v-model="carList.car_num" disabled></el-input>
                </el-form-item>

                <el-form-item label="创建时间">
                    <el-input v-model="carList.create_time" disabled></el-input>
                </el-form-item>

                <el-form-item label="起始位置">
                    <el-input v-model="carList.start_pos"></el-input>
                </el-form-item>

                <el-form-item label="目标位置">
                    <el-input v-model="carList.end_pos"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="modifyData()">编辑</el-button>
                    <el-button style="float: right" type="danger" @click="hideForm('carForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                carForm: false,
                tableData: [],
                carList: {
                    id: '',
                    car_num: '',
                    create_time: '',
                    start_pos: '',
                    end_pos: '',
                    driver: ''
                }
            }
        },
        methods: {
            handleEdit(index, row) {
                this.showForm('carForm')
                this.carList = row
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            getData () {
                this.cusMark()
                this.api.Car.getCarInfo().then( res => {
                    this.cusMark(res)
                    console.log(res);
                    this.tableData = res.data.data
                }).catch( err => {
                    this.cusMark(1)
                    console.log(err);
                })
            },
            modifyData () {
                this.api.Car.modifyInfo(this.carList).then( res => {
                    console.log(res);
                    for (let i in this.carList) {
                        this.carList[i] = ''
                    }
                    this.hideForm('carForm')
                    this.getData()
                    alert(res.data.msg)
                    // this.tableData = res.data.data
                }).catch( err => {
                    console.log(err);
                })
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>

<style scoped>
    .car-modal{
        width: 300px;
        border: 1px solid #cccccc;
        border-radius: 10px;
        padding: 40px;
        position: absolute;
        top: 20%;
        left:40%;
        background: white;
    }
</style>